<template>
  <div class="ArtistRightside">
    <h2>热门歌手</h2>
    <ul>
      <li v-for="artist in artists" :key="artist.id" @click="toArtist(artist.id,artist.name)">
        <img :src="`${artist.picUrl}?param=50y50`"/>
        <p>{{ artist.name }}</p>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'ArtistRightside',
  props: ['id'],
  data() {
    return {
      artists: []
    }
  },
  mounted() {
    // 获取相似歌手列表
    this.$API.simiArtsit(this.id).then(res => {
      if (res.data.code === 200) {
        this.artists = res.data.artists.slice(0, 6)
      }
    })
  },
  methods: {
    toArtist(id, title) {
      this.$router.push({
        path: '/artist',
        query: {
          id,
          title // 网页标题
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ArtistRightside {
  width: 270px;
  padding: 25px;

  h2 {
    font-size: 14px;
    border-bottom: 1px solid #999999;
    padding-bottom: 10px;
  }

  ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;

    li {
      flex: 33% {
        grow: 1;
      };
      margin: 15px 0;
      cursor: pointer;

      p {
        // 单行文本溢出显示省略号
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 50px;
      }
    }
  }
}
</style>